<template>
  <view class="login-container">
    <!-- 自定义导航栏 -->
    <navigation-bar></navigation-bar>
    <view class="main-login-content">
      <!-- 头像 -->
      <view class="focus-avatar">
        <image class="avatar-pic" src="/static/avatar.png" mode="aspectFill"></image>
      </view>
      <!-- 登录方式 -->
      <view class="sub-login-methods">
        <navigator url="/subpkg/login-ccaccount/login-ccaccount" class="cc-account login-btn">
          Campus Circle账号登录
        </navigator>
        <navigator url="/subpkg/login-newaccount/login-newaccount" hover-class="none" class="new-account login-btn">
          新建账号
        </navigator>
        <view class="wechat-account login-btn">
          微信登录
        </view>
      </view>
    </view>
    <!-- 底部协议条款 -->
    <view class="bottom-policy-term">
      以上操作均需在同意
      <br>
      <text class="policy">《用户服务协议》《隐私政策条款》</text>
      <br>
      下进行操作
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .login-container {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 160rpx;

    .main-login-content {
      .focus-avatar {
        padding: 200rpx 0;
        text-align: center;

        .avatar-pic {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .sub-login-methods {
        .login-btn {
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          width: 660rpx;
          height: 72rpx;
          background-color: #000;
          border-radius: 50rpx;
          color: #FFF;
          font-size: 36rpx;
          text-align: center;
          line-height: 72rpx;
          z-index: 99;
        }

        .cc-account {
          margin-top: 100rpx;
        }

        .new-account {
          background-color: #FFF;
          color: #000;
          border: 2rpx solid #000;
        }

        .new-account,
        .wechat-account {
          margin-top: 60rpx;
        }
      }
    }

    .bottom-policy-term {
      width: 100%;
      position: absolute;
      bottom: 10rpx;
      font-size: 28rpx;
      text-align: center;

      .policy {
        color: #244FFF;
      }
    }
  }
</style>